<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="cancel" style="min-width: 700px;">
    <el-transfer v-model="selectList" filterable :left-default-checked="selectList" :right-default-checked="rightList"
      :props="{
    key: 'teacherNumber',
    label: 'name',
  }" :titles="['全体人员', title]" :button-texts="['移除', '添加']" ref="transfer" :data="list"
      @right-check-change="rightHandle" @change="changeHamdle">
    </el-transfer>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()" :disabled="!btnFlag">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ref } from "vue";
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { Picture as IconPicture } from "@element-plus/icons-vue";
export default {
  name: "BaseTeacherList",
  data() {
    return {
      type: 0,
      dialogFormVisible: ref(false),
      title: "",
      page: 0,
      departmentId: 0,
      pageSize: 10,
      total: 0,
      limit: 10,
      list: [],
      selectList: [],
      rightList: [],
      addPath: '/javaApi/baseTeacherDepartment/add',
      form: {
        name: "",
        teacherNumber: "",
      },
      btnFlag: false,
    };
  },
  components: {},
  setup() {
    return {
      locale: zhCn,
    };
  },
  mounted() {

  },
  watch: {
    $route() { },
  },
  methods: {
    cancel() {
      this.dialogFormVisible = false;
      this.selectList = [];
      this.rightList = [];
      this.list = [];
      this.btnFlag = false

      this.$nextTick(() => {
        this.$refs.transfer.clearQuery('left')
        this.$refs.transfer.clearQuery('right')
      })
    },

    save() {
      if (this.rightList.length == 0) {
        ElMessage.error("请至少选择一名人员后保存");
        return;
      }
      httpService(
        this.addPath,
        {
          departmentId: this.departmentId,
          teacherNumbers: this.rightList,
        },
        "get"
      ).then((data) => {
        if (data.code == 200) {
          ElMessage.success("保存成功");
          //刷新父亲组件
          this.cancel();
          this.$emit('onSubmit');
        }
      });
    },

    filterMethod(query, item) {
      return item.initial.toLowerCase().includes(query.toLowerCase());
    },

    rightHandle(value) {
      this.rightList = value
    },

    changeHamdle(value) {
      this.rightList = value
    },

    listByDepartmentId(departmentId) {
      this.departmentId = departmentId;
      let path = ''
      if (this.$route.query.type != 3) {
        path = "/javaApi/baseTeacherDepartment/listByDepartmentId/" + departmentId
      } else {
        path = "/javaApi/baseTeacherSubject/list/1/10000"
      }

      httpService("/javaApi/baseTeacher/list/1/10000", {}, "get").then(
        (data) => {
          for (let k = 0; k < data.list.length; k++) {
            data.list[k].name =
              data.list[k].name + "-" + data.list[k].teacherNumber;
          }
          this.list = data.list;
          httpService(
            path,
            {
              departmentId: this.departmentId,
            },
            "get"
          ).then((da) => {
            this.btnFlag = true
            this.$route.query.type != 3 ? da = da : da = da.list //区分是学科还是级部部门

            let selList = [];
            for (let i = 0; i < da.length; i++) {
              selList.push(da[i].teacherNumber);
            }
            // this.selectData = selList;
            this.rightList = selList;
            this.selectList = selList;
          });
        }
      );
    },
    
  },
};
</script>
<style scoped>
.el-main {
  padding: 0px;
  text-align: left;
}

.teacher-content {
  width: 100%;
}

.app-table {
  background: #eff3f5;
  padding: 10px;
}

.app-separator {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}

.app-body {
  background: white;
  padding: 20px 20px 10px 20px;
  margin-bottom: 10px;
  min-height: calc(100vh - 204px);
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-lighter);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-lighter);
}

.el-pagination {
  text-align: center;
  margin-top: 10px;
}

.el-transfer {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
</style>
